<template>
  <div>
    <div class="n-log2 n-log2-2">
      <div class="u-phonewrap">
        <input
          type="number"
          class="j-phone txt u-txt"
          style="box-sizing: content-box"
          v-model="tel"
          placeholder="请输入手机号"
        />
      </div>
      <div class="f-mgt10 inputbox">
        <a
          href="javascript:;"
          class="f-fr s-fc3 forget"
          data-action="forget"
          @click="$parent.changeView(3)"
          >忘记密码？</a
        >
        <input
          type="password"
          name="pw"
          id="pw"
          v-model="pass"
          class="j-pwd u-txt password"
          placeholder="请输入密码"
        />
      </div>
      <div class="j-err u-err" v-show="show">
        <i class="u-icn u-icn-25"></i>
        <span v-text="Tips_text">请输入正确的手机号</span>
      </div>
      <div class="f-mgt20">
        <a
          class="j-primary u-btn2 u-btn2-2"
          hidefocus="true"
          href="javascript:;"
          data-action="login"
          @click.stop="send() && login_flag"
        >
          <i v-if="login_flag">登录</i>
          <i v-if="!login_flag">登录....</i>
        </a>
      </div>
    </div>
    <div class="js-btmbar n-loglink2 f-cb">
      <a
        href="javascript:;"
        data-action="select"
        class="f-fl s-primary"
        @click="$parent.changeView(1)"
        >&lt;&nbsp;&nbsp;其他登录方式</a
      >
      <a
        href="javascript:;"
        data-action="reg"
        class="f-fr"
        @click="$parent.changeView(4)"
        >没有帐号？免费注册&nbsp;&nbsp;&gt;</a
      >
    </div>
  </div>
</template>
<script>
import { PhoneLogin } from "../../../network/login";
import { LoginStatus } from "../../../network/login";
import store from "../../../store/index";

export default {
  data() {
    return {
      tel: "",
      pass: "",
      show: false,
      Tips_text: "",
      login_flag: true,
    };
  },
  methods: {
    send() {
      //点击登录
      const myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!this.tel) {
        this.tips("电话不能为空");
      } else if (!myreg.test(this.tel)) {
        this.tips("请填写正确的手机号码");
      } else if (!this.pass.trim()) {
        this.tips("密码不能为空");
      } else {
        this.show = false;
        this.login();
      }
    },
    tips(text) {
      //提示
      this.show = true;
      this.Tips_text = text;
    },
    login() {
      //登录
      this.login_flag = false;
      PhoneLogin(this.tel, this.pass) //发送电话 密码
        .then((res) => {
          this.login_flag = true;
          if (res.data.code === 200) {
              this.status(res.data.account.id)
          } else {
            this.tel = "";
            this.pass = "";
            this.tips("手机号或密码错误");
          }
        });
    },
    status(uid) {
      LoginStatus().then( res => {   //判断登陆状态
        if (res.data.data.account) {
          console.log("登陆成功");
          store.dispatch("user", uid);
          store.dispatch("private" , {limit :30 , offset : 0})
          this.$parent.close();
        } else {
          this.tips("未登录成功");
        }
      });
    },
  },
};
</script>
<style scoped>
.n-log2-2 {
  padding: 30px 0 43px;
  width: 220px;
  margin: 0 auto;
}
.u-phonewrap {
  position: relative;
  height: 30px;
  margin: 0;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  z-index: 10;
}
.n-log2 .u-txt {
  width: 93%;
}

.u-phonewrap .txt {
  display: block;
  padding: 5px 8px 5px;
  height: 20px;
  line-height: 20px;
  border: none;
  outline: none;
}
.inputbox {
  position: relative;
}
.f-mgt10 {
  margin-top: 10px;
}
.inputbox .forget {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 7px;
}
.s-fc3 {
  color: #666;
  font-size: 12px;
}
a.s-fc3:hover {
  text-decoration: underline;
}
.inputbox .password {
  position: relative;
  padding-right: 66px;
  box-sizing: border-box;
  width: 220px;
  height: 32px;
  outline: none;
}
.u-txt {
  margin: 0;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
}
.n-log2 .u-err {
  height: auto;
  line-height: 18px;
  font-size: 12px;
}
.u-err {
  margin-top: 5px;
  color: #e33232;
}
.n-log2 .u-err i {
  margin-top: -2px;
}
.u-err i {
  margin-right: 8px;
}
em,
i {
  font-style: normal;
  text-align: left;
  font-size: inherit;
}
.u-icn-25 {
  width: 14px;
  height: 14px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  background: url("./../../../assets/imgs/icon.png") no-repeat 0 9999px;
  background-position: -50px -270px;
}
.f-mgt20 {
  margin-top: 20px;
}
.u-btn2,
.u-btn2 i,
.u-btn2 .icn,
.u-btni,
.u-btni i,
.u-tag,
.u-tag i,
.u-btni-addply .ply {
  background: url("./../../../assets/imgs/button2.png") no-repeat 0 9999px;
}
.n-log2-2 .u-btn2-2,
.n-log2-3 .u-btn2-2 {
  width: 215px;
}
.u-btn2-2 {
  color: #fff;
  background-position: right -428px;
}
.n-log2-2 .u-btn2-2 i,
.n-log2-3 .u-btn2-2 i {
  width: 218px;
}
.u-btn2-2 i {
  color: #fff;
  background-position: 0 -387px;
}
.u-btn2,
.u-btn2 i {
  display: inline-block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}
.u-btn2-2 i:hover {
  background-position: 0 -469px;
}
.n-loglink2 {
  padding: 0 19px;
  height: 48px;
  border-top: 1px solid #c6c6c6;
  border-radius: 0 0 4px 4px;
  line-height: 48px;
  background-color: #f7f7f7;
}
.n-loglink2 a.s-primary {
  color: #0c72c3;
}
.n-loglink2 a {
  font-size: 12px;
  color: #999;
  text-decoration: none;
}
.f-fr {
  float: right;
}
.f-fr:hover {
  text-decoration: underline;
}
</style>